// Colors
$button-background: color('purple', 'base');
$button-color: $white;
$h1-shadow-color: rgba(0, 0, 0, .2);

// Skin customisation
.tunnel-skin {
    .navbar-fixed {
        height: 0;
    }

    .btn,
    .btn-large {
        color: $button-color;
        background-color: $button-background;
    }

    .tunnel {
        canvas {
            background-color: color('purple', 'base');
        }

        h1 {
            @include transform(translateY(-50%));
            position: absolute;
            top: 50%;
            z-index: 10;
            width: 100%;
            padding: 0 2rem;
            margin: 0;
            font-size: 5rem;
            font-weight: 700;
            letter-spacing: 2px;
            color: $white;
            text-align: center;
            text-shadow: 0 1px 1px $h1-shadow-color;
            text-transform: uppercase;

            @media #{$small-and-down} {
                padding: 0 1rem;
                font-size: 3rem;
            }
        }
    }
}
